{% extends "base.html" %}

{% block style %}
<style>
  body{
    height: 100vh;
  }
  .main{
    margin: 0 10px;
    padding: 10px 0;
    height: 100%;
    box-sizing: border-box;
  }
  .editor-box{
    box-sizing: border-box;
    height: 500px;
  }
  .editor-box > .edui-editor,
  .editor-box .edui-editor-iframeholder{
    width: 100% !important;
  }
  /* 二维码 */
  .qrcode-box-mask{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: rgba(204, 204, 204, .3);
    display: none;
  }
  .qrcode-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    padding: 40px 35px 35px 35px;
    background-color: #ffffff;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  .qrcode-box > .qrcode-head{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 34px;
    background: url("{{ editorPath }}/themes/default/images/dialog-title-bg.png") repeat-x bottom;
  }
  .qrcode-box > .qrcode-head > .close-icon{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("{{ editorPath }}/themes/default/images/icons-all.gif") no-repeat 0 -59px;
  }
  .qrcode-box > .qrcode-head > .close-icon:hover{
    background-position: 0 -89px;
  }
  .qrcode-box > .qrcode-cnt{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 34px;
    font-size: 0.8rem;
    text-align: center;
  }
</style>
{% endblock %}

{% block headScript %}
<script type="text/javascript" src="{{ editorPath }}/ueditor.config.js" charset="utf-8"></script>
<script type="text/javascript" src="{{ editorPath }}/ueditor.all.min.js" charset="utf-8"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="{{ editorPath }}/lang/zh-cn/zh-cn.js" charset="utf-8"></script>
{% endblock %}

{% block body %}
<div class="main">
  <div class="qrcode-box-mask">
    <div id="qrcode" class="qrcode-box">
      <div class="qrcode-head">
        <span>&nbsp;</span>
        <i class="close-icon" onclick="toggleQrcodeBox()"></i>
      </div>
      <div class="qrcode-cnt"></div>
      <img src="" alt="">
    </div>
  </div>
  <script id="editor" type="text/plain" class="editor-box">
    {{ sourceContent | safe }}
  </script>
</div>
{% endblock %}

{% block script %}
<!-- 额外库 -->
<script type="text/javascript" src="/third-party/qrcodejs-master/qrcode.js"></script>
<!-- run -->
<script type="text/javascript">
  // express 模板传递参数
  {{ scriptTransfer | safe }}
  // toolbar 自定义功能按钮，文章发布
  UE.registerUI('btn-save', function (editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
      execCommand: function () {
        save2Server({
          pid: projectInfo.uuid,
          content: editor.getContent()
        });
      }
    });
    //创建一个button
    var btn = new UE.ui.Button({
      //按钮的名字
      name: uiName,
      //提示
      title: '保存编辑内容',
      // 显示名称
      label: '保存',
      // 是否显示图标
      showIcon: true,
      //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
      cssRules: 'background-position: -560px 0;',
      //点击时执行的命令
      onclick: function () {
        //这里可以不用执行命令,做你自己的操作也可
        editor.execCommand(uiName);
      }
    });
    // 因为你是添加button,所以需要返回这个button
    return btn;
  });
  // toolbar 自定义功能按钮，文章预览
  UE.registerUI('btn-preview', function (editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
      execCommand: function () {
        window.open('/preview/' + projectInfo.uuid);
      }
    });
    //创建一个button
    var btn = new UE.ui.Button({
      //按钮的名字
      name: uiName,
      //提示
      title: '预览编辑',
      // 显示名称
      label: '预览',
      // 是否显示图标
      showIcon: true,
      //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
      cssRules: 'background-position: -420px -20px;',
      //点击时执行的命令
      onclick: function () {
        //这里可以不用执行命令,做你自己的操作也可
        editor.execCommand(uiName);
      }
    });
    // 不返回
    // return btn;
  });
  // toolbar 自定义功能按钮，文章发布
  UE.registerUI('btn-publish', function (editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
      execCommand: function () {
        publishPageAsActive(function (rs) {
          showQRCode(rs.url);
        });
      }
    });
    //创建一个button
    var btn = new UE.ui.Button({
      //按钮的名字
      name: uiName,
      //提示
      title: '预览发布编辑内容',
      // 显示名称
      label: '预览发布界面',
      // 是否显示图标
      showIcon: true,
      //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
      cssRules: 'background-position: -420px -20px;',
      //点击时执行的命令
      onclick: function () {
        //这里可以不用执行命令,做你自己的操作也可
        editor.execCommand(uiName);
      }
    });
    // 因为你是添加button,所以需要返回这个button
    return btn;
  });
  //实例化编辑器
  //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  var ue = UE.getEditor('editor'),
    prjID = projectInfo.uuid,
    qrcodeObj;

  /**
   * 编辑器加载就绪
  */
  ue.addListener('ready', function(eType) {
    ue.execCommand('focus'); //编辑器家在完成后，让编辑器拿到焦点
    // 验证服务器中是否存在
    axios.get('/api/checkstylefile', {
      params: {
        pid: prjID
      }
    }).then(res => {
      if(res.status === 200){
        res = res.data;
        if(res.code !== 200){
          publishStyleInfo();// 上传样式
        }
      } else {
        ue.trigger('showmessage', {
          type: 'error',
          content: '验证出错，需要重新刷新界面',
          timeout: 5000
        });
      }
    });
  });
  /* 自动保存触发前 */
  ue.addListener('beforeautosave', function (type, data) {});
  /* 自动保存触发后 */
  ue.addListener('afterautosave', function (type, data) {
    save2Server({
      pid: prjID,
      content: ue.getContent()
    });
  });
  /**
   * 保存content到服务器
   */
  function save2Server(content) {
    UE.ajax.request('/api/project-source', {
      method: 'POST',
      timeout: 60 * 1000,
      async: true,
      data: content,
      onsuccess: function (xhr, data) {
        ue.trigger('showmessage', {
          content: '远程保存成功',
          timeout: 2000
        });
      },
      onerror: function (xhr) {
        ue.trigger('showmessage', {
          type: 'error',
          content: '远程保存错误',
          timeout: 2000
        });
      }
    });
  }
  /**
   * 将编辑的当前文档发布
   */
  function publishPageAsActive(call, err) {
    UE.ajax.request('/api/project-publish', {
      method: 'GET',
      data: {
        pid: prjID
      },
      onsuccess: function (xhr) {
        var res = JSON.parse(xhr.responseText) || {};
        if (res.state === 'SUCCESS') {
          if (typeof call === 'function') {
            call(res);
          }
          // showQRCode(res.url);
        }
      },
      onerror: function (xhr) {
        console.log(xhr.responseText);
      }
    });
  }
  /**
   * 获取完整的html然后以文件方式上传服务器
   */
  function publishAllHtmlPageAsActive(call, err) {
    var pageAllHtmlStr = ue.getAllHtml();
    var htmlBlob = new Blob([pageAllHtmlStr]);
    var formData = new FormData();
    formData.append('pid', prjID);
    formData.append('file', htmlBlob);
    axios.request({
      url: '/api/project-publish',
      method: 'POST',
      data: formData
    }).then(res => {
      if (res.status === 200) {
        res = res.data;
      } else {
        ue.trigger('showmessage', {
          type: 'error',
          content: '文章发布失败',
          timeout: 2000
        });
      }
    });
  }
  /**
   * 上传样式信息
   */
  function publishStyleInfo() {
    var docHead = genHtmlHeadBlob();
    var formData = new FormData();
    formData.append('pid', prjID);
    formData.append('bodyClass', docHead.bodyClass);
    formData.append('file', docHead.styleTagBlob);
    axios.request({
      url: '/api/project-stylefile',
      method: 'POST',
      data: formData
    }).then(res => {
      if (res.status === 200) {
        res = res.data;
      } else {
        ue.trigger('showmessage', {
          type: 'error',
          content: '文章发布失败',
          timeout: 2000
        });
      }
    });
  }
  /**
   * 根据ueditor生成style样式文件
  */
  function genHtmlHeadBlob() {
    var me = ue, headHtml = [];
    me.fireEvent('getAllHtml', headHtml);
    // 判断浏览器是否为IE
    if (UE.browser.ie && UE.browser.version > 8) {
      var headHtmlForIE9 = '';
      UE.utils.each(me.document.styleSheets, function (si) {
        headHtmlForIE9 += (si.href ? '<link rel="stylesheet" type="text/css" href="' + si.href + '" />' : '<style>' +
          si.cssText + '</style>');
      });
      UE.utils.each(me.document.getElementsByTagName('script'), function (si) {
        headHtmlForIE9 += si.outerHTML;
      });
    }
    var styleStr = (headHtmlForIE9 || me.document.getElementsByTagName('head')[0].innerHTML) + headHtml.join('\n');
    //
    return {
      bodyClass: UE.browser.ie && UE.browser.version < 9 ? 'view' : '',
      styleTagBlob: new Blob([styleStr])
    }
  }
  /**
   * 二维码显示
   */
  function showQRCode(cnt) {
    var idStr = 'qrcode';
    // 是否加载库成功
    try {
      if (!qrcodeObj) {
        qrcodeObj = new QRCode(idStr, {
          text: cnt,
          width: 256,
          height: 256,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
      }
      qrcodeObj.clear(); // 清除
      qrcodeObj.makeCode(cnt); // 重绘
    } catch (e) {
      var qrcodeImageUrl = [
        'https://api.qrserver.com/v1/create-qr-code/?data=',
        encodeURIComponent(cnt),
        '&size=220x220&margin=10'
      ].join('');
      console.log(qrcodeImageUrl);
      document.querySelector('#' + idStr + ' > img').setAttribute('src', qrcodeImageUrl);
    }
    // 显示二维码内容
    var $qrcodeCnt = document.querySelector('#' + idStr + ' > .qrcode-cnt');
    $qrcodeCnt.innerHTML = '<a href="' + cnt + '" target="_blank">' + cnt + '</a>';
    // show
    toggleQrcodeBox('show');
  }
  // 显示隐藏，二维码盒子
  function toggleQrcodeBox(type) {
    var $mask = document.querySelector('#qrcode').parentElement;
    var displayValue = $mask.style.display === 'none' ? 'block' : 'none';
    if (type === 'show') {
      displayValue = 'block';
    } else if (type === 'show') {
      displayValue = 'none';
    }
    $mask.style.display = displayValue;
  }
</script>
{% endblock %}